/**
 * Created by zzy on 2017/5/19.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    PixelRatio,
    Animated,
    WebView,
    Linking
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons'

export default class BuyFooter extends Component{

    constructor(props){
        super(props)
        this.state = {
            totalCount:0,
            bounceValue:new Animated.Value(1)
        }
    }
    animateShoppingCart(){
        this.state.bounceValue.setValue(1.8) ;   // 设置一个较大的初始值
        Animated.spring(                          // 可选的基本动画类型: spring, decay, timing
            this.state.bounceValue,                 // 将`bounceValue`值动画化
            {
                toValue: 1,                         // 将其值以动画的形式改到一个较小值
                friction: 1,                          // Bouncier spring
            }
        ).start() ;                             // 开始执行动画
    }
    render(){
         let {addshoppingCart,totleCount,confirmOrder,collect,shoppingCart,collectProductFlg} = this.props;
        // let totalCount = this.state.totalCount >999? '99+' : this.state.totalCount
        return <View style={{height:44,backgroundColor:'white',flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
            <TouchableOpacity style={[buyFooterStyle.footerItem,buyFooterStyle.center]} onPress={()=>{
                Linking.openURL('tel:'+this.props.telephoneNumber)
            }}>
                <Icon name="ios-call-outline" size={24} color="gray"/>
                <Text style={buyFooterStyle.footerText}>客服</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[buyFooterStyle.footerItem,buyFooterStyle.center]} onPress={collect}>
                {
                    collectProductFlg==true?<Icon name="ios-star" size={24} color="#45B3F0"/>:<Icon name="ios-star-outline" size={24} color="gray"/>
                }
                <Text style={buyFooterStyle.footerText}>收藏</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[buyFooterStyle.footerItem,buyFooterStyle.center]}  onPress={shoppingCart}>
                <Icon name="ios-cart-outline" size={24} color="gray"/>
                <Text style={buyFooterStyle.footerText}>购物车</Text>
                {
                    totleCount==0?(null):<Animated.View
                        style={{transform:[                        // `transform`是一个有序数组（动画按顺序执行）
                            {scale: this.state.bounceValue}],height:17,borderRadius:11,backgroundColor:'red',position:'absolute',right:5,top:0,justifyContent:'center',alignItems:'center'}}>
                        <Text style={{color:'#fff',fontSize:this.state.fontSize}}>{'  '+totleCount+'  '}</Text>
                    </Animated.View>
                }
            </TouchableOpacity>
            <TouchableOpacity style={[{flexGrow:2,height:44,backgroundColor:'#FFB90F'},buyFooterStyle.center]} onPress={addshoppingCart}>
                <Text style={[buyFooterStyle.footerText,buyFooterStyle.color]}>加入购物车</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[{flexGrow:2,height:44,backgroundColor:'red'},buyFooterStyle.center]} onPress={confirmOrder}>
                <Text style={[buyFooterStyle.footerText,buyFooterStyle.color]}>立即购买</Text>
            </TouchableOpacity>
        </View>
    }
}

const buyFooterStyle=StyleSheet.create({
    footerItem:{
        height:40,
        flexGrow:1
    },
    center:{
        alignItems:'center',
        justifyContent:'center'
    },
    footerText:{
        fontSize:12
    },
    color:{
        color:'white'
    }
})